<!--聊天内容主体 -->
<template>
    <div class="content">
        <div v-for="(item, index) in data.chatRecords" class="chat-row">
            <el-row v-if="item.from == data.fromUser.id">
                <el-col :span="4">
                    <el-image class="send-img" style="width: 60px; height:  60px" :src="data.fromUser.imgUrl"
                        :zoom-rate="1.2" :initial-index="4" fit="cover" />
                </el-col>
                <el-col :span="16" style="margin: auto 0px">
                    <div class="send-content"> <span style="line-height: 50px;">{{ item.content }}</span></div>
                </el-col>
            </el-row>

            <el-row v-if="item.from != data.fromUser.id">
                <el-col :span="16" :offset="4" style="margin-top: auto;">
                    <div class="receive-content"> <span style="line-height: 50px;">{{ item.content }}</span></div>
                </el-col>
                <el-col :span="4">
                    <el-image class="send-img" style="width:  60px; height:  60px" :src="data.toUser.imgUrl"
                        :zoom-rate="1.2" :initial-index="4" fit="cover" />
                </el-col>
            </el-row>
            <el-row class="write-message">
                <el-row class="icon-row">
                    <el-col :md="1" :sm="2">
                        <span class="iconfont icon-smail"></span>
                    </el-col>
                    <el-col :md="1" :sm="2">
                        <span class="iconfont icon-folder-open"></span>
                    </el-col>
                </el-row>
                <el-row class="send-row">
                    <el-form :model="form" label-width="auto">
                        <el-row class="textarea-row">
                            <el-form-item>
                                <el-input :rows="9" v-model="form.content" type="textarea" />
                            </el-form-item>
                        </el-row>
                        <el-row style="position: absolute; right: 5vh;">
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">发送消息</el-button>
                            </el-form-item>
                        </el-row>
                    </el-form>
                    <!-- <el-col><el-button type="primary" >发送消息</el-button></el-col> -->
                </el-row>
            </el-row>

        </div>
    </div>
</template>

<script  setup>
import { reactive, toRefs, onBeforeMount, onMounted, ref, watch } from 'vue'
import { getChatRecordList } from '@/api/index'
import { userStore } from '@/store/user'
import { sendMessage } from '@/api/index'
import { ElMessage } from 'element-plus'
onMounted(() => {
    // 绑定监听事件
    window.addEventListener('keydown', submit)
})
// do not use same name with ref
const form = reactive({
    content: '',
})

const data = reactive({
    toUser: {
        id: 2,
        nickName: 'So',
        imgUrl: 'http://localhost:3000/src/assets/img/so.jpg'
    },
    fromUser: userStore().userInfo,
    chatRecords: []
})

getChatRecordList().then(res => {
    data.chatRecords = res;
})

const submit = (e) => {
    if (e.keyCode === 13 || e.keyCode === 100) {
        onSubmit()
    }
}

const writeTextarea = ref(null);
const onSubmit = () => {
    let sendBody = {
        from: data.fromUser.id,
        to: data.toUser.id,
        content: form.content
    }
    sendMessage(sendBody).then(res => {
        console.log("发送成功")
        data.chatRecords.push(sendBody);
        form.content = null;
        writeTextarea.value.focus()
    })

}

function handleMessage(wsMessage) {
    const resp = JSON.parse(wsMessage.data);
    if (resp.code == 501) {
        ElMessage.error(resp.data)
        localStorage.removeItem('Authorization')
        location.reload();
    }
    //如果成功收到消息，往记录里追加数据
    data.chatRecords.push(resp);
}

function setMsgRecordScorll() {
    const msgscroll = document.querySelector('.message-record');
    if (msgscroll == null) {
        return;
    }
    console.log('top:' + msgscroll.scrollTop);
    console.log('height:' + msgscroll.scrollHeight);
    msgscroll.scrollTop = msgscroll.scrollHeight;
}

watch(() => data.chatRecords, (newVal, oldVal) => {
    console.log(newVal)
    setTimeout(() => {
        setMsgRecordScorll()
    });
}, {
    immediate: true,
    deep: true
}
);
</script>
<style scoped>
.content {
    border-bottom-right-radius: 0.5em;
    left: 250px;
    width: 750px;
    height: 87.5vh;
    background-color: white;
    position: absolute;
}

.send-content {
    text-align: left;
    width: fit-content;
    padding: 0 10px;
    background-color: #0eff008f;
    border-radius: 10px;
    position: relative;
}

.send-content::before {
    content: "";
    position: absolute;
    right: 100%;
    transform: translateY(-150%);
    top: 26px;
    border-top: 0px solid transparent;
    border-right: 25px solid #0eff008f;
    border-bottom: 13px solid transparent;
}

.receive-content {
    float: right;
    width: fit-content;
    padding: 0 10px;
    background-color: #0eff008f;
    border-radius: 10px;
    position: relative;
}

.receive-content::after {
    content: "";
    position: absolute;
    left: 100%;
    transform: translateY(-150%);
    top: 26px;
    border-top: 0px solid transparent;
    border-left: 25px solid #0eff008f;
    border-bottom: 13px solid transparent;
}


.chat-row {
    width: 100%;
    margin: 10px auto;
}

.send-row {
    width: 100%;
    /* border: 1px red solid; */
    /* height: 28vh; */
}

.send-row .el-form {
    width: 100%;
}

.el-form-item {
    width: 100%;
}

.textarea-row {
    width: 96%;
    transform: translate(20px, 10px);
}

/* 渐变边框 */
.el-input__inner {
    border-image: linear-gradient(to right, #000718, #23b7cb) 5 5 !important;
    /* 自定义其他样式时 注意加 !important 安全一些 */
}

.el-textarea__inner {
    border: 1px red solid;
}

.send-img {
    top: 50%;
    transform: translate(0, -50%);
    width: 60px;
    height: 60px;
    border-radius: 0.5em;
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 30px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: gray;
}
</style>